<template>
  <div class="mapbj">
    <img src="@/assets/img/home/yueqing.png" usemap="#Map" border="0" style="width: 44.5rem; height: 38.6875rem;" />
    <map name="Map" id="Map">
      <!-- 大荆镇 -->
      <div class="dajing map_icon" @click="switchMaptwo(1, '大荆镇', '330382101000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="9,151,22,142,32,131,31,120,43,108,60,95,73,94,90,91,103,74,122,60,139,63,152,64,159,49,173,45,187,23,206,7,210,18,226,23,230,42,230,51,250,61,243,75,250,82,250,96,240,117,232,128,230,169,220,179,215,190,197,191,191,180,171,177,152,184,138,202,131,213,110,238,89,246,83,239,75,199,65,197,62,188,38,188,14,173"
        />
      </div>
      <!-- 雁荡镇 -->
      <div class="yandang map_icon" @click="switchMaptwo(2, '雁荡镇', '330382104000')">
        <p class="font_w4 font_s20">
          {{ Hqlrsl[1] }}
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="259,96,264,109,261,128,270,135,273,154,292,155,310,151,312,167,319,175,306,191,300,209,286,212,282,218,277,241,265,250,267,271,250,271,235,259,228,239,207,213,204,192,218,188,235,170,236,156,233,126,248,108"
        />
      </div>
      <!-- 仙溪镇 -->
      <div class="xianxi map_icon" @click="switchMaptwo(3, '仙溪镇', '330382102000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="155,186,143,212,129,220,114,238,98,250,87,253,79,267,70,303,61,319,61,332,90,337,107,316,114,328,128,349,161,346,174,334,182,330,198,340,211,358,213,369,229,356,229,337,231,322,236,317,237,283,234,263,233,251,226,234,214,218,204,197,199,189,190,184,175,181,162,181"
        />
      </div>

      <!-- 清江镇 -->
      <div class="qingjiang map_icon" @click="switchMaptwo(4, '清江镇', '330382106000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="325,161,333,181,347,191,366,192,379,193,403,191,425,199,435,210,414,226,411,238,397,244,387,244,379,242,359,253,363,264,356,273,351,273,343,278,331,271,325,262,329,245,320,235,311,229,309,215,304,203,310,195,316,180"
        />
      </div>
      <!-- 芙蓉镇 -->
      <div class="furong map_icon" @click="switchMaptwo(5, '芙蓉镇', '330382105000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="327,244,327,260,324,271,337,279,342,283,341,293,336,304,338,311,329,325,338,343,345,353,356,367,350,392,354,410,344,421,333,421,340,440,332,440,304,433,292,426,281,435,273,445,255,461,242,441,230,424,236,404,253,389,243,365,233,356,230,350,230,323,237,317,233,297,240,278,236,268,254,272,265,276,269,273,270,251,282,234,290,218,303,210,317,233"
        />
      </div>

      <!-- 虹桥镇 -->
      <div class="hongqiao map_icon" @click="switchMaptwo(6, '虹桥镇', '330382108000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="390,247,406,248,411,237,418,226,429,216,435,210,454,220,471,226,472,236,475,254,488,268,496,268,507,294,510,307,501,318,488,310,488,300,475,299,459,298,446,308,440,307,432,320,418,336,414,339,406,319,393,316,377,320,370,325,357,316,349,323,348,337,338,341,332,331,332,325,341,312,336,304,340,284,347,278,355,274,363,274,363,269,360,255,370,245,375,242"
        />
      </div>
      <!-- 天成街道 -->
      <div class="tiancheng map_icon" @click="switchMaptwo(7, '天成街道', '330382008000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="451,308,466,303,478,299,487,299,492,314,497,321,486,325,475,325,463,331,455,320,449,317" />
      </div>

      <!-- 石帆街道 -->
      <div class="shifan map_icon" @click="switchMaptwo(8, '石帆街道', '330382007000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="419,336,433,326,443,311,451,319,455,326,467,329,479,329,487,332,484,340,468,348,448,363,457,373,457,381,450,381,443,390,458,400,455,408,457,417,443,412,434,398,437,389,425,374,420,364,410,359,412,339"
        />
      </div>
      <!-- 淡溪镇 -->
      <div class="danxi map_icon" @click="switchMaptwo(9, '淡溪镇', '330382111000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="383,324,394,321,404,316,413,329,414,337,411,352,411,363,419,366,424,373,431,386,439,395,434,406,452,422,451,440,441,450,440,463,425,473,420,484,414,488,402,458,393,449,373,452,373,465,365,471,354,460,344,437,336,424,346,420,361,416,353,403,356,380,358,349,350,352,346,348,348,338,355,321,374,324"
        />
      </div>
      <!-- 城东街道 -->
      <div class="chengdongY map_icon" @click="switchMaptwo(10, '城东街道', '330382001000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="512,322,528,337,540,352,554,358,554,368,537,381,523,387,508,367,506,371,492,390,475,399,468,405,458,402,446,391,450,381,462,373,450,363,475,350,489,340,489,332,490,325,503,320"
          href="#"
        />
      </div>
      <!-- 乐城街道 -->
      <div class="lecheng map_icon" @click="switchMaptwo(11, '乐城街道', '330382002000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="462,409,455,431,453,445,445,455,438,466,424,483,423,497,431,505,447,510,453,500,461,500,468,508,481,505,490,480,503,483,500,467,508,459,526,463,545,467,553,444,558,430,542,405,534,389,524,387,516,380,511,374,500,376,490,390,475,398"
        />
      </div>
      <!-- 白石街道 -->
      <div class="baishi map_icon" @click="switchMaptwo(12, '白石街道', '330382006000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="450,509,464,518,464,532,489,541,503,550,512,540,532,554,556,554,564,554,559,543,568,532,576,520,560,513,555,512,550,501,553,490,553,479,548,468,532,468,524,465,512,465,504,465,507,477,504,485,500,487,486,491,482,503,475,512,463,505,457,502"
        />
      </div>
      <!-- 北白象镇 -->
      <div class="beibaixiang map_icon" @click="switchMaptwo(13, '北白象镇', '330382115000')">
        <p class="font_w4 font_s20">
          {{ Hqlrsl[1] }}
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="510,560,531,570,548,578,578,580,604,595,616,609,640,608,664,595,674,584,676,563,666,539,668,521,664,515,651,513,639,513,637,503,628,503,620,510,617,518,608,510,602,517,578,525,568,526,566,541,565,548,562,556,534,555,515,546,507,547"
        />
      </div>
      <!-- 柳市镇 -->
      <div class="liushi map_icon" @click="switchMaptwo(14, '柳市镇', '330382114000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="670,513,674,485,691,462,702,436,703,421,693,416,679,415,671,419,657,434,642,435,629,433,624,429,613,422,607,432,601,445,589,437,571,432,564,429,553,448,553,461,553,477,558,492,559,509,571,519,588,525,609,515,611,512,616,514,622,507,631,502,641,511,661,510"
        />
      </div>
      <!-- 南城街道 -->
      <div class="chengnanY map_icon" @click="switchMaptwo(15, '南城街道', '330382003000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="538,390,549,413,557,424,569,424,582,431,588,437,588,412,580,393,579,381,572,372,562,362,552,363,542,375" />
      </div>
      <!-- 盐盆街道 -->
      <div class="yanpen map_icon" @click="switchMaptwo(16, '盐盆街道', '330382004000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="590,435,596,444,608,436,609,418,612,405,605,400,605,387,608,379,624,379,631,372,606,372,588,366,580,352,567,352,555,352,559,357,573,366,583,379,583,386,586,397,587,419"
        />
      </div>
      <!-- 翁垟街道 -->
      <div class="wengyang map_icon" @click="switchMaptwo(17, '翁垟街道', '330382005000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="650,380,654,400,660,413,677,420,666,428,658,436,638,426,621,420,609,419,612,410,606,399,612,383,625,377,637,377" />
      </div>
    </map>
  </div>
</template>

<script>
export default {
  name: 'MapYueQing',

  data () {
    return {
      qxname: '乐清市',
      category: false,
      isActive: 1,
      // cityThreeType: '8',
      // cityThreeTitle: '',
      Hqlrsl: [],
      qxcode: '330382000000'
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 12.获取老人数量(会按照地区自动分类
      this.$http.post(this.$api.Hqlrsl.hqlrsl, this.qxcode, true).then(result => {
        let arr = result.data.response.countTotalRegionDoctor
        // console.log('12.获取老人数量(会按照地区自动分类)', arr);
        for (let val of arr.values()) {
          this.Hqlrsl.push(val.num)
        }
      })
    },
    switchMaptwo (cityThreeType, cityThreeName, cityThreeJdCode) {
      var _this = this
      setTimeout(function () {
        _this.$router.push({
          path: '/AreaThreeComponents',
          name: 'AreaThreeComponents',
          query: {
            key: 'key',
            cityThreeTypeKey: cityThreeType,
            cityThreeTitleKey: cityThreeName,
            cityThreeJdCodeKey: cityThreeJdCode,
            cityThreeQxcodeKey: _this.qxcode,
            cityThreeQxnameKey: _this.qxname
          }
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
//地图背景
.mapbj {
  position: absolute;
  top: 1.5%;
  left: 30%;
  //地图点
  .map_icon {
    color: #214494;
    font-style: italic;
    :hover {
      color: #fff;
      font-size: 1.375rem;
    }
    width: 7rem;
    height: 7rem;
    line-height: 2.4rem;
    text-align: center;
    background: url(../../../assets/img/home/2.png) no-repeat center;
    background-size: 100% 100%;
  }
}

.dajing {
  position: absolute;
  top: 0;
  left: 12%;
}
.yandang {
  position: absolute;
  top: 14%;
  left: 28%;
}
.xianxi {
  position: absolute;
  top: 24%;
  left: 14%;
}
.qingjiang {
  position: absolute;
  top: 20%;
  left: 42%;
}
.furong {
  position: absolute;
  top: 36%;
  left: 30%;
}
.hongqiao {
  position: absolute;
  top: 26%;
  left: 52%;
}
.tiancheng {
  position: absolute;
  top: 34%;
  left: 58%;
}
.shifan {
  position: absolute;
  top: 40%;
  left: 52%;
}
.danxi {
  position: absolute;
  top: 53%;
  left: 45%;
}
.chengdongY {
  position: absolute;
  top: 39%;
  left: 63%;
}
.lecheng {
  position: absolute;
  top: 57%;
  left: 60%;
}
.baishi {
  position: absolute;
  top: 71%;
  left: 64%;
}
.beibaixiang {
  position: absolute;
  top: 79%;
  left: 80%;
}
.liushi {
  position: absolute;
  top: 61%;
  left: 90%;
}
.chengnanY {
  position: absolute;
  top: 49%;
  left: 71%;
}
.yanpen {
  position: absolute;
  top: 43%;
  left: 76%;
}

.wengyang {
  position: absolute;
  top: 51%;
  left: 83%;
}
</style>
